// 获取元素
const dle = document.querySelectorAll('i.close')
// console.log(dle)
const div = document.querySelectorAll('div')
// console.log(div)

//创造一个错误提示节点
const hint = document.createElement('p')
const hint2 = document.createElement('p')


// 一.手机号格式校验
const phone = document.querySelector('#username')
phone.addEventListener('change', verifyphone)
function verifyphone() {
  dle[0].style.display = 'block' //删除按钮显示
  //1. 定义一个规则
  const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
  //2. 验证
  if (!reg.test(phone.value)) {
    phone.value.trim().length === 0 ? hint.innerHTML = '请输入手机号' : hint.innerHTML = '手机号格式不正确'
    hint.classList.add('active')
    div[1].appendChild(hint)
    return false
  }
  // 3. 符合规则 清空文本
  hint.innerHTML = ''
  div[1].appendChild(hint)
  return true

}

// 二.密码格式校验
const password = document.querySelector('#password')
password.addEventListener('change', verifyPwd)
function verifyPwd() {
  dle[1].style.display = 'block' //删除按钮显示
  //1. 定义一个规则
  const reg = /^[a-zA-Z0-9-_]{6,18}$/
  //2. 验证
  if (!reg.test(password.value)) {
    password.value.trim().length === 0 ? hint2.innerHTML = '请输入密码' : hint2.innerHTML = '密码格式不正确'
    hint2.classList.add('active')
    div[2].appendChild(hint2)
    return false
  }
  // 3. 符合规则 清空文本
  hint2.innerHTML = ''
  div[1].appendChild(hint2)
  return true

}

// 三、表单提交校验
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
  e.preventDefault()
  // 表单验证，先调用一下，否则下面的if逻辑中断
  verifyphone()
  verifyPwd()
  // 依次判断上面的每个框框 是否通过
  if (!verifyphone() || !verifyPwd()) {
    return alert('数据校验不通过')
  }
  alert(`登录成功\n用户名是:${phone.value},密码是:${password.value}`)
})


// 四、删除
/*  因为上面已经每个验证框都起了不同的变量名，循环过于麻烦
for (let i = 0; i < dle.length; i++) {
  dle[i].addEventListener('click', function () {
    dle[i].nextElementSibling.value = ''
    
  })
} 
*/

dle[0].addEventListener('click', function () {
  phone.value = ''
  this.style.display = 'none'
  this.parentNode.removeChild(hint)
})

dle[1].addEventListener('click', function () {
  password.value = ''
  this.style.display = 'none'
  this.parentNode.removeChild(hint2)
})
